import React from 'react'
import ReactDom from 'react-dom'
import { Spring, Transition, config } from 'react-spring'
import { HashRouter as Router, Route, Switch, Link } from 'react-router-dom'
import { TimingAnimation, Easing } from 'react-spring/dist/addons'
const App1 = (props) => {
    return <div style={{ ...props.style }}>
        app1<br />
    </div>
}
const App2 = (props) => {
    return <div style={{ ...props.style }}>
        app2<br />
    </div>
}
const App3 = (props) => {
    return <div style={{ ...props.style }}>
        App3<br />
    </div>
}
const App4 = (props) => {
    return <div style={{ ...props.style }}>
        app4<br />
    </div>
}
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            isShpw: false
        }
    }
    render() {
        var self = this;
        var isShpw = this.state.isShpw
        return <div>
            <Router>
                {/*  <Transition 
        from={{ opacity: 0,    transform:" translateY(100px)", }} 
        enter={{ opacity: 1,  transform:" translateY(0px)", }}
        leave={{ opacity: 0 , transform:" translateY(100px)", }}
        >
        {isShpw&&(styles => <div style={styles}>i will fade in</div>)}
        </Transition>   */}
                <Route
                    render={({ location }) => {
                        return <div>
                            <Link to="/">app1</Link>
                            <Link to="/app2">app2</Link>
                            <Link to="/app3">app3</Link>
                            <Link to="/app4">app4</Link><br /> <Transition
                                impl={TimingAnimation}
                                config={{ duration: 300/* , easing: Easing.linear */ }}
                                keys={location.pathname}
                                from={{ opacity: 0, /* transform: " translateY(1000px)",  */ }}
                                enter={{ opacity: 1, /* transform: " translateY(0px)",  */ }}
                                leave={{ opacity: 0, /* transform: " translateY(1000px)",  */ }}
                            >
                                {
                                    (style) => {
                                        return <Switch
                                            location={location}>
                                            <AnimationRouter path="/" exact
                                                type="top-to-bottom"
                                                style={style}
                                                component={() => {
                                                    return <App1 />
                                                }} />
                                            <AnimationRouter path="/app2"
                                                type="left-to-right"
                                                style={style}
                                                component={() => {
                                                    return <App2 />
                                                }} />
                                            <AnimationRouter path="/app3"
                                                type="right-to-left"
                                                style={style}
                                                component={() => {
                                                    return <App3 />
                                                }} />
                                            <AnimationRouter path="/app4"
                                                type="bottom-to-top"
                                                style={style}
                                                component={() => {
                                                    return <App4 />
                                                }} />
                                        </Switch>
                                    }

                                }

                            </Transition>
                        </div>
                    }}
                />
            </Router>
        </div >
    }

}

const AnimationRouter = (props) => {
    /*  var type="left-to-right";
     var type="right-to-left";
     var type="top-to-bottom";
     var type="bottom-to-top"; */
    var type = props.type || "bottom-to-top"
    var baseRadio = props.style.opacity
    var style = {}
    if (type == "left-to-right") {
        var transform = `translateX(${-(1 - baseRadio) * 1000}px)`
        style = { ...props.style, transform }
    }
    if (type == "right-to-left") {
        var transform = `translateX(${(1 - baseRadio) * 1000}px)`
        style = { ...props.style, transform }
    }
    if (type == "top-to-bottom") {
        var transform = `translateY(${-(1 - baseRadio) * 1000}px)`
        style = { ...props.style, transform }
    }
    if (type == "bottom-to-top") {
        var transform = `translateY(${(1 - baseRadio) * 1000}px)`
        style = { ...props.style, transform }
    }
    return <Route
        path={props.path} exact={props.exact} component={() => {
            return <div className={"animationRouter"} style={style}>
                {props.component()}
            </div>
        }}
    />

}

ReactDom.render(<App />, document.getElementById("root"))